<template>

	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view>
			<view>{{num+1}}</view>
			<view>{{ ok ? 'YES' : 'NO' }}</view>
			<view>{{ message.split('').reverse().join('')}}</view>
		</view>

		<view v-for="item in arr" style="color:#FFA500">
			{{item}}
		</view>

		<view v-for="n in 4" :key="n" style="color:#FF0000;">
			<view :class="'list-' + n % 2">{{ n % 2 }}</view>
		</view>

		<view v-for="(value,name,index) in object">
			{{index}} . {{name}} : {{value}}
		</view>

		<view v-for="item in arr" :key="item.id">
			<view style="color:#0000FF;">{{item.id}}:{{item.name}}</view>
		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				num: 1,
				ok: false,
				message: "哈哈哈哈",
				title: "这是一个文本插值测试",
				arr: [{
						id: 1,
						name: 'first'
					},
					{
						id: 2,
						name: 'two'
					},
					{
						id: 3,
						name: 'thre'
					},
					{
						id: 4,
						name: 'four'
					},
				],
				object: {
					title: "什么是标题",
					author: "什么是作者",
					time: "什么是时间"
				}
			}
		},
		methods: {

		}
	}
</script>

<style>
	.content {
	  display: flex;
	  flex-direction: column;
	  align-items: center; 
	  justify-content: center;
	  min-height: 10vh; 
	}
	.logo {
		width: 150rpx;
		height: 150rpx;
		display: block;
		margin: 10rpx auto;
	}
</style>